<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>选择服务方-来设计工业设计在线</title>
		<link rel="icon shortcut" type="image/x-icon" href="../../img/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="../../css/common/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/demand/service-list.css"/>
		<script type="text/javascript" src="../../js/viewport.js"></script>
	</head>
	<body>
		<div class="main">
			<h2>请选择合适的服务方</h2>
			<div class="main-list">
				<div class="list-item selected">
					<div class="item-header clearfix">
						<!--<div class="header-label">服务方A</div>-->
						<div class="header-logo fl"><img src="../../img/demand/companyimg.jpg"/></div>
						<div class="header-info fl">
							<div class="header-name">杭州艾客工业设计有限公司</div>
							<div class="header-text"><i>15个</i>相关案例</div>
						</div>
					</div>
					<div class="item-label">
						<div class="label label1">大咖级</div>
						<div class="label label2">广东广州</div>
						<div class="label label3">17年经验</div>
					</div>
					<div class="item-award">
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
					</div>
					<div class="item-img">
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
					</div>
				</div>
				<div class="list-item">
					<div class="item-header">
						<div class="header-logo fl"><img src="../../img/demand/spolierimg.png"/></div>
						<div class="header-info fl">
							<div class="header-name active"></div>
							<div class="header-text"><i>15个</i>相关案例</div>
						</div>
					</div>
					<div class="item-label">
						<div class="label label1">大咖级</div>
						<div class="label label2">广东广州</div>
						<div class="label label3">17年经验</div>
					</div>
					<div class="item-award">
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
					</div>
					<div class="item-img">
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
					</div>
				</div>
				<div class="list-item">
					<div class="item-header">
						<div class="header-logo fl"><img src="../../img/demand/spolierimg.png"/></div>
						<div class="header-info fl">
							<div class="header-name active"></div>
							<div class="header-text"><i>15个</i>相关案例</div>
						</div>
						<!--<div class="header-label">服务方A</div>-->
						<!--<div class="header-text"><i>15个</i>相关案例</div>-->
					</div>
					<div class="item-label">
						<div class="label label1">大咖级</div>
						<div class="label label2">广东广州</div>
						<div class="label label3">17年经验</div>
					</div>
					<div class="item-award">
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
						<div class="award"><img src="../../img/demand/icon-awter.jpg"/></div>
					</div>
					<div class="item-img">
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
						<div class="img-wrap"><img src="../../img/demand/protuct-img.jpg"/></div>
					</div>
				</div>
			</div>
			<div class="footer">
				<a class="btn" id="">支付￥99，专人一对一为您服务</a>
			</div>
		</div>
		<div class="site-window win-hint">
			<div class="win-content">
				<div class="content-text">支付<i class="blue">99</i>元，即可查看详细信息，更有专人1对1服务！</div>
				<div class="content-btnlist">
					<a class="nopaybtn btn" id="">再考虑一下</a>
					<a class="paybtn btn" id="">开启服务</a>
				</div>
			</div>
		</div>
		<div class="site-window win-payhint">
			<div class="win-content">
				<div class="content-text">不知如何选择，支付<i class="blue">99</i>元后，即有专人为您服务，精准匹配合适的服务方，直到您满意为止！</div>
				<div class="content-btnlist">
					<a class="nopaybtn btn" id="">再考虑一下</a>
					<a class="paybtn btn" id="">开启服务</a>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/jquery-1.12.4.min.js" ></script>
	<script>
		//1.弹出提示
		var $win_payhint = $('.win-payhint'),
			$win_hint = $('.win-hint'),
			timer = null;
		
		timer = setTimeout(function(){
			$win_payhint.fadeIn();
			clearTimeout(timer);
		},3000);
		
		
		//site-window function
		$('.site-window .nopaybtn').click(function(){
			$(this).parent().parent().parent().fadeOut();
		});
		$('.win-content').click(function(e){
			e.stopPropagation();
		});
		$('.site-window').click(function(){
			$(this).fadeOut();
		});
		
		
		
		//2.选择服务方
		var $list_item = $('.main .list-item'),
			$getDatabtn = $('.footer .btn');
		$list_item.click(function(){
			if(!$(this).hasClass('selected')){
				$list_item.removeClass('selected');
				$(this).addClass('selected');
				$win_hint.fadeIn();
				hasSelected();
				return;
			}
			$(this).removeClass('selected');
			hasSelected();
		});
		hasSelected();
		function hasSelected(){
			$getDatabtn.text('支付￥99,专人一对一为您服务');
			$getDatabtn.css('background-color','#00a0e9');
			for(var i = 0;i<$list_item.length;i++){
				if($list_item.eq(i).hasClass('selected')){
					$getDatabtn.text('确认匹配该服务方,立刻支付￥99');
					$getDatabtn.css('background-color','#fea733');
					return false;
				}
				
			}
		}
		
		
	</script>
</html>
